<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Introduction to Org-Reveal</title>
<meta name="author" content="(Yujie Wen)"/>
<style type="text/css">
.underline { text-decoration: underline; }
</style>
<link rel="stylesheet" href="file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/css/reveal.css"/>

<link rel="stylesheet" href="file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/css/theme/moon.css" id="theme"/>

<link rel="stylesheet" href="./local.css"/>

<!-- If the query includes 'print-pdf', include the PDF print sheet -->
<script>
    if( window.location.search.match( /print-pdf/gi ) ) {
        var link = document.createElement( 'link' );
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = 'file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/css/print/pdf.css';
        document.getElementsByTagName( 'head' )[0].appendChild( link );
    }
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<meta name="description" content="Org-Reveal Introduction.">
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide"><h1 class="title">Introduction to Org-Reveal</h1><h2 class="author">Yujie Wen</h2><p class="date">Created: 2019-10-20 dom 19:01</p>
</section>
<p>
<a href="http://melpa.org/#/ox-reveal"><object type="image/svg+xml" data="http://melpa.org/packages/ox-reveal-badge.svg" class="org-svg">
Sorry, your browser does not support SVG.</object></a>
<a href="http://www.gnu.org/licenses/gpl-3.0.html"><object type="image/svg+xml" data="http://img.shields.io/:license-gpl3-blue.svg" class="org-svg">
Sorry, your browser does not support SVG.</object></a>
</p>

<section>
<section id="slide-org7b94ea7">
<h2 id="org7b94ea7"><span class="section-number-2">1</span> Table of Contents</h2>
<p>
Title links are for viewing within org-mode buffer only. <b>Github
viewers please use the <code>(gh)</code> links.</b>
</p>

<ul>
<li><a href="#/slide-org7b94ea7">Table of Contents</a>(<a href="https://github.com/yjwen/org-reveal#table-of-contents">gh</a>)</li>
<li><a href="#/slide-org21f6a9a">Reveal.js and Org-Reveal</a>(<a href="https://github.com/yjwen/org-reveal#revealjs-and-org-reveal">gh</a>)</li>
<li><a href="#/slide-org80927af">Requirements and Installation</a>(<a href="https://github.com/yjwen/org-reveal#requirements-and-installation">gh</a>)
<ul>
<li><a href="#/slide-org9d1ea41">Install Reveal.js</a>(<a href="https://github.com/yjwen/org-reveal#install-revealjs">gh</a>)</li>
<li><a href="#/slide-orgba7b73a">Install org-reveal from MELPA</a>(<a href="https://github.com/yjwen/org-reveal#install-org-reveal-from-melpa">gh</a>)</li>
<li><a href="#/slide-org8a2454b">Install org-reveal from GitHub</a>(<a href="https://github.com/yjwen/org-reveal#install-org-reveal-from-github">gh</a>)</li>

</ul></li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-org9d07aeb">Configuration</a>(<a href="https://github.com/yjwen/org-reveal#configuration">gh</a>)
<ul>
<li><a href="#/slide-orgd9a82fd">Set the location of Reveal.js</a>(<a href="https://github.com/yjwen/org-reveal#set-the-location-of-revealjs">gh</a>)
<ul>
<li><a href="#/slide-orga1b2906">Url form for file location</a>(<a href="https://github.com/yjwen/org-reveal#url-form-for-file-location">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org289600e">First Try</a>(<a href="https://github.com/yjwen/org-reveal#first-try">gh</a>)</li>
<li><a href="#/slide-org19a8de9">The HLevel</a>(<a href="https://github.com/yjwen/org-reveal#the-hlevel">gh</a>)
<ul>
<li><a href="#/slide-org4fd7705">HLevel's Effects on Slides Layout</a>(<a href="https://github.com/yjwen/org-reveal#hlevels-effects-on-slides-layout">gh</a>)</li>
<li><a href="#/slide-orgc45b0dd">Configure HLevel's Value</a>(<a href="https://github.com/yjwen/org-reveal#configure-hlevels-value">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org0637990">Force Split</a>(<a href="https://github.com/yjwen/org-reveal#force-split">gh</a>)</li>

</ul></li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-org9d8f0f5">Select Theme and Transition</a>(<a href="https://github.com/yjwen/org-reveal#select-theme-and-transition">gh</a>)</li>
<li><a href="#/slide-org918f3d1">Set The Title Slide</a>(<a href="https://github.com/yjwen/org-reveal#set-the-title-slide">gh</a>)
<ul>
<li><a href="#/slide-org5d781ff">Customize the Title Slide</a>(<a href="https://github.com/yjwen/org-reveal#customize-the-title-slide">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org3f3d913">Set Slide Background</a>(<a href="https://github.com/yjwen/org-reveal#set-slide-background">gh</a>)
<ul>
<li><a href="#/slide-orgd803b1d">Single Colored Background</a>(<a href="https://github.com/yjwen/org-reveal#single-colored-background">gh</a>)</li>
<li><a href="#/slide-org94ac695">Single Image Background</a>(<a href="https://github.com/yjwen/org-reveal#single-image-background">gh</a>)</li>
<li><a href="#/slide-orgc673858">Repeating Image Background</a>(<a href="https://github.com/yjwen/org-reveal#repeating-image-background">gh</a>)</li>
<li><a href="#/slide-orgcc61bf6">Title Slide Background Image</a>(<a href="https://github.com/yjwen/org-reveal#title-slide-background-image">gh</a>)</li>
<li><a href="#/slide-org44007bb">Background for all slides</a>(<a href="https://github.com/yjwen/org-reveal#background-for-all-slides">gh</a>)</li>

</ul></li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-orge806e97">Slide Size</a>(<a href="https://github.com/yjwen/org-reveal#slide-size">gh</a>)</li>
<li><a href="#/slide-org519e44a">Slide Numbering</a>(<a href="https://github.com/yjwen/org-reveal#slide-numbering">gh</a>)</li>
<li><a href="#/slide-org1cde0b1">Slide Header/Footer</a>(<a href="https://github.com/yjwen/org-reveal#slide-header/footer">gh</a>)</li>
<li><a href="#/slide-org4cf6371">Fragmented Contents</a>(<a href="https://github.com/yjwen/org-reveal#fragmented-contents">gh</a>)
<ul>
<li><a href="#/slide-org25cba00">Fragment Styles</a>(<a href="https://github.com/yjwen/org-reveal#fragment-styles">gh</a>)</li>
<li><a href="#/slide-org0c67e67">Fragment Index</a>(<a href="https://github.com/yjwen/org-reveal#fragment-index">gh</a>)</li>
<li><a href="#/slide-orgdccccc9">List Fragments</a>(<a href="https://github.com/yjwen/org-reveal#list-fragments">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org87d3cfe">Data State</a>(<a href="https://github.com/yjwen/org-reveal#data-state">gh</a>)</li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-org89f9be2">Initialization options</a>(<a href="https://github.com/yjwen/org-reveal#initialization-options">gh</a>)</li>
<li><a href="#/slide-orgf1c19a1">Third-Party Plugins</a>(<a href="https://github.com/yjwen/org-reveal#third-party-plugins">gh</a>)
<ul>
<li><a href="#/slide-orgb3306ad">By Defining Variable</a>(<a href="https://github.com/yjwen/org-reveal#by-defining-variable">gh</a>)</li>
<li><a href="#/slide-orgad16359">By Local Option Line</a>(<a href="https://github.com/yjwen/org-reveal#by-local-option-line">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org6ce9415">Highlight Source Code</a>(<a href="https://github.com/yjwen/org-reveal#highlight-source-code">gh</a>)
<ul>
<li><a href="#/slide-org5c9deca">Using highlight.js</a>(<a href="https://github.com/yjwen/org-reveal#using-highlightjs">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org8461b41">Editable Source Code</a>(<a href="https://github.com/yjwen/org-reveal#editable-source-code">gh</a>)</li>
<li><a href="#/slide-my-heading">MathJax</a>(<a href="https://github.com/yjwen/org-reveal#mathjax">gh</a>)</li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-org07fc8e5">Preamble and Postamble</a>(<a href="https://github.com/yjwen/org-reveal#preamble-and-postamble">gh</a>)
<ul>
<li><a href="#/slide-org757e7de">Generating Pre/Postamble by Emacs-Lisp Functions</a>(<a href="https://github.com/yjwen/org-reveal#generating-pre/postamble-by-emacs-lisp-functions">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org279bc3e">Raw HTML in Slides</a>(<a href="https://github.com/yjwen/org-reveal#raw-html-in-slides">gh</a>)</li>
<li><a href="#/slide-orgfd8f579">Speaker Notes</a>(<a href="https://github.com/yjwen/org-reveal#speaker-notes">gh</a>)
<ul>
<li><a href="#/slide-org186777c">Easy-Template for Speaker Notes</a>(<a href="https://github.com/yjwen/org-reveal#easy-template-for-speaker-notes">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org7f2f93f">Multiplexing</a>(<a href="https://github.com/yjwen/org-reveal#multiplexing">gh</a>)</li>
<li><a href="#/slide-org2e3d84d">Extra Stylesheets</a>(<a href="https://github.com/yjwen/org-reveal#extra-stylesheets">gh</a>)</li>
<li><a href="#/slide-org9d26d67">Select Built-In Scripts</a>(<a href="https://github.com/yjwen/org-reveal#select-built-in-scripts">gh</a>)</li>
<li><a href="#/slide-org2f3c7d4">Extra Dependent Script</a>(<a href="https://github.com/yjwen/org-reveal#extra-dependent-script">gh</a>)</li>
<li><a href="#/slide-org709638e">Extra Slide Attribute</a>(<a href="https://github.com/yjwen/org-reveal#extra-slide-attribute">gh</a>)</li>
<li><a href="#/slide-org7e91c29">Export into Single File</a>(<a href="https://github.com/yjwen/org-reveal#export-into-single-file">gh</a>)</li>
<li><a href="#/slide-org88967a0">Export Current Subtree</a>(<a href="https://github.com/yjwen/org-reveal#export-current-subtree">gh</a>)</li>

</ul>
</section>
<section id="slide-org7b94ea7-split">

<h2><span class="section-number-2">1</span> Table of Contents</h2>
<ul>
<li><a href="#/slide-orgea52323">Tips</a>(<a href="https://github.com/yjwen/org-reveal#tips">gh</a>)
<ul>
<li><a href="#/slide-orgfbb1a52">Managing Table of Contents</a>(<a href="https://github.com/yjwen/org-reveal#managing-table-of-contents">gh</a>)</li>
<li><a href="#/slide-orgee49b10">Internal Links</a>(<a href="https://github.com/yjwen/org-reveal#internal-links">gh</a>)</li>
<li><a href="#/slide-org8906e20">Custom JS</a>(<a href="https://github.com/yjwen/org-reveal#custom-js">gh</a>)</li>
<li><a href="#/slide-orgdbd1e41">Executable Source Blocks</a>(<a href="https://github.com/yjwen/org-reveal#executable-source-blocks">gh</a>)
<ul>
<li><a href="#/slide-orgb2aef8f">HTML Src Block</a>(<a href="https://github.com/yjwen/org-reveal#html-src-block">gh</a>)</li>
<li><a href="#/slide-org1a8124d">Javascript Src Block</a>(<a href="https://github.com/yjwen/org-reveal#javascript-src-block">gh</a>)</li>
<li><a href="#/slide-org3d1a52e">Perl Src Block (not klipsified)</a>(<a href="https://github.com/yjwen/org-reveal#perl-src-block-(not-klipsified)">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org0a5ea31">Properties for Sub-headings</a>(<a href="https://github.com/yjwen/org-reveal#properties-for-sub-headings">gh</a>)</li>

</ul></li>
<li><a href="#/slide-org27dfbc7">My org-reveal presentation among many within the same Org-mode file</a>(<a href="https://github.com/yjwen/org-reveal#my-org-reveal-presentation-among-many-within-the-same-org-mode-file">gh</a>)</li>
<li><a href="#/slide-orgdf83f44">Thanks</a>(<a href="https://github.com/yjwen/org-reveal#thanks">gh</a>)</li>

</ul>
</section>
</section>
<section>
<section id="slide-org21f6a9a">
<h2 id="org21f6a9a"><span class="section-number-2">2</span> Reveal.js and Org-Reveal</h2>
<ul>
<li><b>Reveal.js</b> is a tool for creating good-looking HTML presentations,
authored by <a href="http://hakim.se/">Hakim El Hattab</a>. <br />
For an example of a reveal.js presentation, see <a href="http://lab.hakim.se/reveal-js/#/">here</a>.</li>
<li><b>Org-Reveal</b> exports your <a href="http://orgmode.org/">Org</a> documents to reveal.js
presentations.<br />
With Org-reveal, you can create beautiful presentations with 3D
effects from simple but powerful Org contents.</li>

</ul>

</section>
</section>
<section>
<section id="slide-org80927af">
<h2 id="org80927af"><span class="section-number-2">3</span> Requirements and Installation</h2>
<ul>
<li>Reveal.js.</li>
<li>Org-mode.</li>
<li>ox-reveal.el.</li>
<li>htmlize.el (optional, for syntax highlighting).</li>
<li>And, of course, emacs.</li>

</ul>

</section>
</section>
<section>
<section id="slide-org9d1ea41">
<h3 id="org9d1ea41"><span class="section-number-3">3.1</span> Install Reveal.js</h3>
<p>
Download Reveal.js packages from <a href="https://github.com/hakimel/reveal.js/">here</a>.
</p>

<p>
Extract Reveal.js folders from the downloaded zip file.
</p>

<p>
If you do not wish to download reveal.js yourself and would rather get a copy from a CDN,
see the section <a href="https://github.com/yjwen/org-reveal#set-the-location-of-revealjs">Set the location of Reveal.js</a>
</p>

</section>
</section>
<section>
<section id="slide-orgba7b73a">
<h3 id="orgba7b73a"><span class="section-number-3">3.2</span> Install org-reveal from MELPA</h3>
<p>
The easiest way to install org-reveal is to install package
ox-reveal from MELPA.
</p>

<p>
Please refer to <a href="http://melpa.org/#/getting-started">http://melpa.org/#/getting-started</a> for using MELPA.
</p>

<p>
<b>Note</b>: It is suggested to use the <a href="http://orgmode.org/elpa.html">Org ELPA</a> archive in pair
with the ox-reveal packages. Emacs builtin Org-mode package may be
out of date for MELPA's ox-reveal.
</p>

</section>
</section>
<section>
<section id="slide-org8a2454b">
<h3 id="org8a2454b"><span class="section-number-3">3.3</span> Install org-reveal from GitHub</h3>
<p>
You can also install the latest developing version of org-reveal directly
from GitHub.
</p>

<p>
Please download the latest Org-reveal package from <a href="https://github.com/yjwen/org-reveal">the Org-reveal
GitHub page</a>. Or clone the GitHub repository:
</p>
<div class="org-src-container">

<pre  class="src src-sh"><code trim>git clone https://github.com/yjwen/org-reveal.git
</code></pre>
</div>

<p>
Copy <code>ox-reveal.el</code> to one of your Emacs's <code>load-path</code>, and add the
following statement to your <code>.emacs</code> file.
</p>
<div class="org-src-container">

<pre  class="src src-lisp"><code trim>(<span style="color: #ff3300; font-weight: bold;">require</span> '<span style="color: #ab00ff;">ox-reveal</span>)
</code></pre>
</div>

<p>
<b>Note</b>: It is suggested to use the Org-mode git repository in pair
with the GitHub org-reveal. Please get the Org-mode git repository
by:
</p>
<div class="org-src-container">

<pre  class="src src-sh"><code trim>$ git clone git://orgmode.org/org-mode.git
</code></pre>
</div>

<p>
Follow the <a href="http://orgmode.org/worg/dev/org-build-system.html">online instruction</a> for building and installing Org-mode.
</p>


</section>
</section>
<section>
<section id="slide-org9d07aeb">
<h2 id="org9d07aeb"><span class="section-number-2">4</span> Configuration</h2>
<div class="outline-text-2" id="text-4">
</div>
</section>
</section>
<section>
<section id="slide-orgd9a82fd">
<h3 id="orgd9a82fd"><span class="section-number-3">4.1</span> Set the location of Reveal.js</h3>
<p>
Org-reveal must know where Reveal.js is on your computer before
exporting Org contents. The location of Reveal.js is the path to
the top directory of the Reveal.js packages, the directory which contains
file <b>README.md</b>, but <b>not</b> the one that contains the file reveal.js.
</p>

<p>
The default location is <code>./reveal.js</code>, relative to the Org file.
</p>

<p>
Changing <code>org-reveal-root</code> 's value will change the location
globally. For example, add the following statement to your .emacs
file:
</p>
<div class="org-src-container">

<pre  class="src src-lisp"><code trim>(setq org-reveal-root <span style="color: #ffa900;">"file:///d:/reveal.js"</span>)
</code></pre>
</div>
<p>
<b>IMPORTANT</b>: the absolute path to Reveal.js should be in URL form,
"<a href="file:///path_to_reveal.js">file:///path_to_reveal.js</a>", as illustrated above.  By setting
option <code>REVEAL_ROOT</code>, the location is only affected within the Org
file.
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_ROOT: <a href="file:///d:/reveal.js">file:///d:/reveal.js</a></span>
</code></pre>
</div>

<p>
Set your <code>REVEAL_ROOT</code> to the following URL to download reveal.js from
a CDN instead of downloading a local copy.
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_ROOT: <a href="https://cdn.jsdelivr.net/npm/reveal.js">https://cdn.jsdelivr.net/npm/reveal.js</a></span>
</code></pre>
</div>


</section>
<section id="slide-orga1b2906">
<h4 id="orga1b2906"><span class="section-number-4">4.1.1</span> Url form for file location</h4>
<p>
For example if you cloned this repository to your home directory,
this file in Mac OS X would be referred to as
"<a href="file:///Users/username/org-reveal/readme.html">file:///Users/username/org-reveal/readme.html</a>".  This file in
Ubuntu would be "<a href="file:///home/username/org-reveal/readme.html">file:///home/username/org-reveal/readme.html</a>" and
in Windows this file would be
"<a href="c:/Users/username/org-reveal/readme.html">c:/Users/username/org-reveal/readme.html</a>".  For more
detail on this standard please refer to
<a href="http://en.wikipedia.org/wiki/File_URI_scheme">http://en.wikipedia.org/wiki/File_URI_scheme</a>
</p>

</section>
</section>
<section>
<section id="slide-org289600e">
<h3 id="org289600e"><span class="section-number-3">4.2</span> First Try</h3>
<p>
To load Org-reveal, type "M-x load-library", then type
"ox-reveal".
</p>

<p>
Now you can export this manual into Reveal.js presentation by
typing "C-c C-e R R".
</p>

<p>
Open the generated "Readme.html" in your browser and enjoy the
cool slides.
</p>

</section>
</section>
<section>
<section id="slide-org19a8de9">
<h3 id="org19a8de9"><span class="section-number-3">4.3</span> The HLevel</h3>
<p>
Org-reveal maps each heading and its contents to one Reveal.js
slide. Since Reveal.js arranges slides into a 2-dimensional matrix,
Org-reveal use a <b>HLevel</b> value to decide whether to map headings to horizontal
or vertical slides.
</p>

<ul>
<li>Headings of level less than or equal to <b>HLevel</b> are mapped to horizontal
slides.</li>
<li>Headings with a deeper level are mapped to vertical slides.</li>

</ul>

<p>
HLevel's default value is 1, means only level 1 headings are arranged
horizontally. Deeper headings are mapped to vertical slides below their
parent level 1 heading.
</p>

</section>
<section id="slide-org4fd7705">
<h4 id="org4fd7705"><span class="section-number-4">4.3.1</span> HLevel's Effects on Slides Layout</h4>
<p>
Assume we have a simple Org file as below:
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #e4e4e4; font-size: 110%; font-weight: bold;">* H1</span>
<span style="color: #e4e4e4; font-size: 110%; font-weight: bold;">* H2</span>
<span style="color: #000000;">*</span><span style="color: #d0d0d0;">* H2.1</span>
<span style="color: #000000;">**</span><span style="color: #bcbcbc; font-weight: bold;">* H2.1.1</span>
<span style="color: #e4e4e4; font-size: 110%; font-weight: bold;">* H3</span>
</code></pre>
</div>

<p>
If HLevel is 1, the default value, headings H2.1 and H2.1.1 will
be mapped to vertical slides below the slides of heading H2.
</p>


<div class="figure">
<p><img src="./images/hlevel.png" alt="hlevel.png" />
</p>
</div>

<p>
If HLevel is changed to 2, slides of heading H2.1 will be changed
to the main horizontal queue, and slides of heading H2.1.1 will be
a vertical slide below it.
</p>


<div class="figure">
<p><img src="./images/hlevel2.png" alt="hlevel2.png" />
</p>
</div>

</section>
<section id="slide-orgc45b0dd">
<h4 id="orgc45b0dd"><span class="section-number-4">4.3.2</span> Configure HLevel's Value</h4>
<ul>
<li>Change variable <code>org-reveal-hlevel</code>'s value to set HLevel globally.<br />
For example, add the following statement to your <code>.emacs</code> file.</li>

</ul>
<div class="org-src-container">

<pre  class="src src-lisp"><code trim>(setq org-reveal-hlevel 2)
</code></pre>
</div>

<ul>
<li>Setting Org files local HLevel to option <code>REVEAL_HLEVEL</code>.</li>

</ul>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_HLEVEL: 2</span>
</code></pre>
</div>

</section>
</section>
<section>
<section id="slide-org0637990">
<h3 id="org0637990"><span class="section-number-3">4.4</span> Force Split</h3>
<p>
If one heading has too many things to fit into one slide, you can
split the contents into multiple vertical slides manually, by inserting
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL: split</span>
</code></pre>
</div>

</section>
<section id="slide-org0637990-split">

<p>
Now a new slide begins after <code>#+REVEAL</code> keyword.
</p>

<p>
To repeat the heading title on the split slide, please insert
<code>#+REVEAL: split:t</code> instead.
</p>

</section>
</section>
<section>
<section id="slide-org9d8f0f5">
<h3 id="org9d8f0f5"><span class="section-number-3">4.5</span> Select Theme and Transition</h3>
<p>
Themes and transition styles are set globally throughout the whole
file by setting options <code>REVEAL_THEME</code>, <code>REVEAL_TRANS</code>, and <code>REVEAL_SPEED</code>.
</p>

<p>
For an example, please check the heading part of this document.
</p>

<p>
Available themes can be found in "css/theme/" in the reveal.js directory.
</p>

<p>
Available transitions are: default|cube|page|concave|zoom|linear|fade|none.
</p>
</section>
</section>
<section>
<section id="slide-org918f3d1">
<h3 id="org918f3d1"><span class="section-number-3">4.6</span> Set The Title Slide</h3>
<p>
By default, Org-reveal generates a title slide displaying the
title, the author, the Email, the date and the time-stamp of the
Org document, controlled by Org's <a href="http://orgmode.org/org.html#Export-settings">export settings</a>.
</p>

<p>
To avoid a title slide, please set variable
<code>org-reveal-title-slide</code> to <code>nil</code>, or add <code>reveal_title_slide:nil</code> to
<code>#+OPTIONS:</code> line.
</p>

<p>
To restore the default title slide, please set variable
<code>org-reveal-title-slide</code> to <code>'auto</code>.
</p>

</section>
<section id="slide-org5d781ff">
<h4 id="org5d781ff"><span class="section-number-4">4.6.1</span> Customize the Title Slide</h4>
<p>
There are 3 ways t ocustomize the title slide.
</p>

<ol>
<li>Set variable <code>org-reveal-title-slide</code> to a string of HTML markups.</li>
<li>Set <code>reveal_title_slide</code> in the <code>#+OPTIONS:</code> line to a string of HTML markups.</li>
<li>Use one or more option lines <code>#+REVEAL_TITLE_SLIDE:</code> to specify
the HTML of the title slide.</li>

</ol>

<p>
The following escaping characters can be used to retrieve document
information:
</p>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">


<colgroup>
<col  class="org-left" />

<col  class="org-left" />
</colgroup>
<tbody>
<tr>
<td class="org-left"><code>%t</code></td>
<td class="org-left">Title</td>
</tr>

<tr>
<td class="org-left"><code>%s</code></td>
<td class="org-left">Subtitle</td>
</tr>

<tr>
<td class="org-left"><code>%a</code></td>
<td class="org-left">Author</td>
</tr>

<tr>
<td class="org-left"><code>%e</code></td>
<td class="org-left">Email</td>
</tr>

<tr>
<td class="org-left"><code>%d</code></td>
<td class="org-left">Date</td>
</tr>

<tr>
<td class="org-left"><code>%%</code></td>
<td class="org-left">Literal %</td>
</tr>
</tbody>
</table>

</section>
</section>
<section>
<section id="slide-org3f3d913">
<h3 id="org3f3d913"><span class="section-number-3">4.7</span> Set Slide Background</h3>
<p>
Slide background can be set to a color, an image or a repeating image
array by setting heading properties.
</p>

</section>
<section id="slide-orgd803b1d" data-background="#543210">
<h4 id="orgd803b1d"><span class="section-number-4">4.7.1</span> Single Colored Background</h4>
<p>
Set property <code>reveal_background</code> to either an RGB color value, or any
supported CSS color format.
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #000000;">**</span><span style="color: #bcbcbc; font-weight: bold;">* Single Colored Background</span>
<span style="color: #00ffc2;">   :PROPERTIES:</span>
   <span style="color: #00ffc2;">:reveal_background:</span> #123456
<span style="color: #00ffc2;">   :END:</span>
</code></pre>
</div>

</section>
<section id="slide-org94ac695" data-background="./images/whale.jpg" data-background-transition="slide">
<h4 id="org94ac695"><span class="section-number-4">4.7.2</span> Single Image Background</h4>
<p>
Set property <code>reveal_background</code> to an URL of background image.
Set property <code>reveal_background_trans</code> to <code>slide</code> to make background image
sliding rather than fading.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #000000;">**</span><span style="color: #bcbcbc; font-weight: bold;">* Single Image Background</span>
<span style="color: #00ffc2;">    :PROPERTIES:</span>
    <span style="color: #00ffc2;">:reveal_background:</span> ./images/whale.jpg
    <span style="color: #00ffc2;">:reveal_background_trans:</span> slide
<span style="color: #00ffc2;">    :END:</span>
</code></pre>
</div>

</section>
<section id="slide-orgc673858" data-background="./images/whale.jpg" data-background-size="200px" data-background-repeat="repeat" data-background-opacity="0.2">
<h4 id="orgc673858"><span class="section-number-4">4.7.3</span> Repeating Image Background</h4>
<p>
Resize background image by setting property
<code>reveal_background_size</code> to a number.
</p>

<p>
Set property <code>reveal_background_repeat</code> to <code>repeat</code> to repeat
image on the background, <code>reveal_background_opacity</code> for the
background opacity, which is a value of 0-1.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #000000;">**</span><span style="color: #bcbcbc; font-weight: bold;">* Repeating Image Background</span>
<span style="color: #00ffc2;">    :PROPERTIES:</span>
    <span style="color: #00ffc2;">:reveal_background:</span> ./images/whale.jpg
    <span style="color: #00ffc2;">:reveal_background_size:</span> 200px
    <span style="color: #00ffc2;">:reveal_background_repeat:</span> repeat
    <span style="color: #00ffc2;">:reveal_background_opacity:</span> 0.2
<span style="color: #00ffc2;">    :END:</span>
</code></pre>
</div>

</section>
<section id="slide-orgcc61bf6">
<h4 id="orgcc61bf6"><span class="section-number-4">4.7.4</span> Title Slide Background Image</h4>
<p>
To set the title slide's background image, please specify the
following options:
</p>

<ul>
<li><code>REVEAL_TITLE_SLIDE_BACKGROUND</code>: A URL to the background image.</li>
<li><code>REVEAL_TITLE_SLIDE_BACKGROUND_SIZE</code>: HTML size specification, e.g. <code>200px</code>.</li>
<li><code>REVEAL_TITLE_SLIDE_BACKGROUND_REPEAT</code>: Set to <code>repeat</code> to repeat the image.</li>
<li><code>REVEAL_TITLE_SLIDE_BACKGROUND_OPACITY</code>: Set the background opacity.</li>

</ul>
</section>
<section id="slide-org44007bb">
<h4 id="org44007bb"><span class="section-number-4">4.7.5</span> Background for all slides</h4>
<p>
You can also configure the background for all slides in the presentation with:
</p>

<ul>
<li><code>REVEAL_DEFAULT_SLIDE_BACKGROUND</code></li>
<li><code>REVEAL_DEFAULT_SLIDE_BACKGROUND_SIZE</code></li>
<li><code>REVEAL_DEFAULT_SLIDE_BACKGROUND_POSITION</code></li>
<li><code>REVEAL_DEFAULT_SLIDE_BACKGROUND_REPEAT</code></li>
<li><code>REVEAL_DEFAULT_SLIDE_BACKGROUND_TRANSITION</code></li>

</ul>

<p>
Refer to the <a href="https://github.com/yjwen/org-reveal#set-slide-background">Set slide background section</a> for instructions on how to use each
parameter.
</p>

</section>
</section>
<section>
<section id="slide-orge806e97">
<h3 id="orge806e97"><span class="section-number-3">4.8</span> Slide Size</h3>
<p>
Reveal.js scales slides to best fit the display resolution, but you can
also specify the desired size by settings the option tags <code>reveal_width</code>
and <code>reveal_height</code>.
</p>

<p>
The scaling behavior can also be constrained by setting following
options:
</p>
<dl>
<dt><code>#+REVEAL_MARGIN:</code></dt><dd>a float number, the factor of empty area
surrounding slide contents.</dd>
<dt><code>#+REVEAL_MIN_SCALE:</code></dt><dd>a float number, the minimum scaling down
ratio.</dd>
<dt><code>#+REVEAL_MAX_SCALE:</code></dt><dd>a float number, the maximum scaling up
ratio.</dd>

</dl>

</section>
</section>
<section>
<section id="slide-org519e44a">
<h3 id="org519e44a"><span class="section-number-3">4.9</span> Slide Numbering</h3>
<p>
To enable slide numbers, please add the following Reveal.js initial option.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_INIT_OPTIONS: slideNumber:true</span>
</code></pre>
</div>

<p>
Other possible choice for slide numbers are:
</p>
<table border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">


<colgroup>
<col  class="org-left" />

<col  class="org-left" />
</colgroup>
<tbody>
<tr>
<td class="org-left">"h.v"</td>
<td class="org-left">Horizontal . vertical slide number. The same as <code>true</code></td>
</tr>

<tr>
<td class="org-left">"h/v"</td>
<td class="org-left">Horizontal / vertical slide number</td>
</tr>

<tr>
<td class="org-left">"c"</td>
<td class="org-left">Flatten slide number</td>
</tr>

<tr>
<td class="org-left">"c/t"</td>
<td class="org-left">Flatten slide number / total slides</td>
</tr>
</tbody>
</table>

</section>
</section>
<section>
<section id="slide-org1cde0b1">
<h3 id="org1cde0b1"><span class="section-number-3">4.10</span> Slide Header/Footer</h3>
<p>
Specify Slide header/footer by <code>#+REVEAL_SLIDE_HEADER:</code> and
<code>#+REVEAL_SLIDE_FOOTER:</code>. The option content will be put into
divisions of class <code>slide-header</code> and <code>slide-footer</code>, so you can
control their appearance in custom CSS file(see <a href="https://github.com/rafadc/org-reveal#extra-stylesheets">Extra Stylesheets</a>).
By default header/footer content will only display on content
slides. To show them also on the title and toc slide you can add
<code>reveal_global_header:t</code> and <code>reveal_global_footer:t</code> to
<code>#+OPTIONS:</code> line.
</p>

</section>
</section>
<section>
<section id="slide-org4cf6371">
<h3 id="org4cf6371"><span class="section-number-3">4.11</span> Fragmented Contents</h3>
<p>
Make contents fragmented (show up one-by-one) by setting option
<code>ATTR_REVEAL</code> with property ":frag frag-style", as illustrated
below.
</p>

<p class="fragment roll-in">
Paragraphs can be fragmented.
</p>

<ul class="fragment roll-in">
<li>Lists can</li>
<li>be fragmented.</li>

</ul>

<p class="fragment roll-in">
Pictures, tables and many other HTML elements can be fragmented.
</p>

</section>
<section id="slide-org25cba00">
<h4 id="org25cba00"><span class="section-number-4">4.11.1</span> Fragment Styles</h4>
<p>
Available fragment styles are:
</p>
<ul class="fragment">
<li>grow</li>
<li>shrink</li>
<li>roll-in</li>
<li>fade-out</li>
<li>highlight-red</li>
<li>highlight-green</li>
<li>highlight-blue</li>
<li>appear</li>

</ul>

<p>
Setting <code>:frag t</code> will use Reveal.js default fragment style, which
can be overridden by local option <code>#+REVEAL_DEFAULT_FRAG_STYLE</code> or
global variable <code>org-reveal-default-frag-style</code>.
</p>

</section>
<section id="slide-org0c67e67">
<h4 id="org0c67e67"><span class="section-number-4">4.11.2</span> Fragment Index</h4>
<p>
Fragment sequence can be changed by assigning adding <code>:frag_idx</code>
property to each fragmented element.
</p>

<p data-fragment-index="3" class="fragment">
And, this paragraph shows at last.
</p>

<p data-fragment-index="2" class="fragment">
This paragraph shows secondly.
</p>

<p data-fragment-index="1" class="fragment">
This paragraph shows at first.
</p>

</section>
<section id="slide-orgdccccc9">
<h4 id="orgdccccc9"><span class="section-number-4">4.11.3</span> List Fragments</h4>
<p>
<code>#+ATTR_REVEAL: :frag frag-style</code> above a list defines fragment
style for the list as a whole.
</p>
<ol class="fragment grow">
<li>All items grow.</li>
<li>As a whole.</li>

</ol>

<p>
To define fragment styles for every list item, please enumerate
each item's style in a lisp list.
</p>

<p>
<code>none</code> in the style list will disable fragment for the
corresponding list item.
</p>

<p>
Custom fragment sequence should also be enumerated for each list
item.
</p>

</section>
<section id="slide-orgdccccc9-split">

<h4><span class="section-number-4">4.11.3</span> List Fragments</h4>
<p>
An example:
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+ATTR_REVEAL: :frag (grow shrink roll-in fade-out none) :frag_idx (4 3 2 1 -)</span>
   * I will grow.
   * I will shrink.
   * I rolled in.
   * I will fade out.
   * I don't fragment.
</code></pre>
</div>

<ul>
<li data-fragment-index="4" class="fragment grow">I will grow.</li>
<li data-fragment-index="3" class="fragment shrink">I will shrink.</li>
<li data-fragment-index="2" class="fragment roll-in">I rolled in.</li>
<li data-fragment-index="1" class="fragment fade-out">I will fade out.</li>
<li>I don't fragment.</li>

</ul>
</section>
<section id="slide-orgdccccc9-split">

<h4><span class="section-number-4">4.11.3</span> List Fragments</h4>
<p>
When there is <code>:frag_idx</code> specified, insufficient fragment style
list will be extended by its last element. So a <code>:frag (appear)</code>
assigns each item of a list the <code>appear</code> fragment style.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+ATTR_REVEAL: :frag (appear)</span>
   * I appear.
   * I appear.
   * I appear.
</code></pre>
</div>
<ul>
<li class="fragment appear">I appear.</li>
<li class="fragment appear">I appear.</li>
<li class="fragment appear">I appear.</li>

</ul>


</section>
</section>
<section>
<section id="slide-org87d3cfe" data-state="alert">
<h3 id="org87d3cfe"><span class="section-number-3">4.12</span> Data State</h3>
<p>
Set property <code>reveal_data_state</code> to headings to change this slide's
display style, as illustrated above.
</p>

<p>
Available data states are: alert|blackout|soothe.
</p>

</section>
</section>
<section>
<section id="slide-org89f9be2">
<h3 id="org89f9be2"><span class="section-number-3">4.13</span> Initialization options</h3>
<p>
Use ~#+REVEAL<sub>INIT</sub><sub>OPTIONS</sub>` to give JS snippet for initialize
reveal.js with different options. Check <a href="https://github.com/hakimel/reveal.js/#configuration">reveal.js document</a> for
supported options. Check the head part of this document for an
example.
</p>
</section>
</section>
<section>
<section id="slide-orgf1c19a1">
<h3 id="orgf1c19a1"><span class="section-number-3">4.14</span> Third-Party Plugins</h3>
<p>
Reveal.js is also extensible through third-party plugins. Org-reveal
now includes a mechanism to load these as well, either for all org buffers
by defining variable, or for local org buffer by setting option line.
</p>

</section>
<section id="slide-orgb3306ad">
<h4 id="orgb3306ad"><span class="section-number-4">4.14.1</span> By Defining Variable</h4>
<p>
Store the names and loading instructions for each plugin in the
customizable variable <code>org-reveal-external-plugins</code>. This variable is
an associative list. The first element of each Assoc cell is a symbol
&#x2013; the name of the plugin &#x2013; and the second is the string of the code
for enabling the plugin. The string can have ONE optional <code>%s</code>, which
will be replaced by `reveal-root`.
</p>

<p>
So, this second element should have the form <code>"{src:
\"%srelative/path/toplugin/from/reveal/root.js\"}</code>.  If you need the
async or callback parameters, include those too.  Ox-reveal will add
the plugin to the dependencies parameter when Reveal is initialized.
</p>

</section>
<section id="slide-orgad16359">
<h4 id="orgad16359"><span class="section-number-4">4.14.2</span> By Local Option Line</h4>
<p>
Specify the plugin by option line <code>#+REVEAL_EXTERNAL_PLUGINS: string
of code</code>. Similiar to the global plugin definition, the string of code
can have one optional <code>%s</code> to be replaced by <code>reveal-root</code>.
</p>

</section>
</section>
<section>
<section id="slide-org6ce9415">
<h3 id="org6ce9415"><span class="section-number-3">4.15</span> Highlight Source Code</h3>
<p>
There are two ways to highlight source code.
</p>
<ol>
<li>Use your Emacs theme</li>
<li>Use highlight.js</li>

</ol>


<p>
To Use your Emacs theme, please make sure <code>htmlize.el</code> is
installed. Then no more setup is necessary.
</p>

<p>
Below is an example of highlighted lisp code from org-reveal. 
</p>
<div class="org-src-container">

<pre  class="src src-lisp"><code trim>(<span style="color: #ff3300; font-weight: bold;">defun</span> <span style="color: #00ffc2;">org-reveal--read-file</span> (file)
  <span style="color: #383838;">"Return the content of file"</span>
  (with-temp-buffer
(insert-file-contents-literally file)
(buffer-string)))
</code></pre>
</div>

<p>
If you saw odd indentation, please set variable <code>org-html-indent</code>
to <code>nil</code> and export again.
</p>

</section>
<section id="slide-org5c9deca">
<h4 id="org5c9deca"><span class="section-number-4">4.15.1</span> Using highlight.js</h4>
<p>
You can also use <a href="https://highlightjs.org">highlight.js</a>, by adding <code>highlight</code> to the Reveal.js
plugin list.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_PLUGINS: (highlight)</span>
</code></pre>
</div>

<p>
The default highlighting theme is <code>zenburn.css</code> brought with
Reveal.js. To use other themes, please specify the CSS file name by
<code>#+REVEAL_HIGHLIGHT_CSS</code> or the variable <code>org-reveal-highlight-css</code>.
</p>

<p>
The "%r" in the given CSS file name will be replaced by Reveal.js'
URL.
</p>

</section>
</section>
<section>
<section id="slide-org8461b41">
<h3 id="org8461b41"><span class="section-number-3">4.16</span> Editable Source Code</h3>
<p>
It is now possible to embed code blocks in a codemirror instance in order to edit code during a presentation.  At present, this capacity is turned on or off at time export using these defcustoms:
</p>
<ul>
<li><code>org-reveal-klipsify-src</code></li>
<li><code>org-reveal-klipse-css</code></li>
<li><code>org-reveal-klipse-js</code></li>

</ul>
<p>
This feature is turned off by default and needs to be switched on with <code>org-reveal-klipsify-src</code>.  At present code editing is supported in javacript, clojure, php, ruby, scheme, and python only.  
</p>

</section>
</section>
<section>
<section id="slide-my-heading">
<h3 id="my-heading"><span class="section-number-3">4.17</span> MathJax</h3>
<p>
\({n! \over k!(n-k)!} = {n \choose k}\)
</p>

<p>
LateX equation are rendered in native HTML5 contents.
</p>

<p>
<b>IMPORTANT</b>: Displaying equations requires internet connection to
<a href="http://mathjax.org/">mathjax.org</a> or local MathJax installation. For local MathJax
installation, set option <code>REVEAL_MATHJAX_URL</code> to the URL pointing
to the local MathJax location.
</p>

<p>
<b>Note</b>: Option <code>reveal_mathjax</code> is obsolete now. Org-reveal
exports necessary MathJax configurations when there is Latex
equation found.
</p>

</section>
</section>
<section>
<section id="slide-org07fc8e5">
<h3 id="org07fc8e5"><span class="section-number-3">4.18</span> Preamble and Postamble</h3>
<p>
You can define preamble and postamble contents which will not be
shown as slides, but will be exported into the body part of the
generated HTML file, at just before and after the slide contents.
</p>

<p>
Change preamble and postamble contents globally by setting variable
<code>org-reveal-preamble</code> and <code>org-reveal-postamble</code>.
</p>

<p>
Change preamble and postamble contents locally by setting options
<code>REVEAL_PREAMBLE</code> and <code>REVEAL_POSTAMBLE</code>, as illustrated at the
heading part of this document.
</p>

<p>
To add custom contents into HTML <code>&lt;head&gt;</code> parts, set contents to
variable <code>org-reveal-head-preamble</code> or option
<code>REVEAL_HEAD_PREAMBLE</code>.
</p>

</section>
<section id="slide-org757e7de">
<h4 id="org757e7de"><span class="section-number-4">4.18.1</span> Generating Pre/Postamble by Emacs-Lisp Functions</h4>
<p>
If the contents of pre/postamble is the name of an evaluated
Emacs-Lisp function, which must accept an argument of Org-mode
info and return a string, the returned string will be taken
as pre/postamble contents.
</p>

<p>
So you can embed the Emacs-Lisp function as an Org-Babel source
block and mark it to be evaluated when exporting the document.
</p>

</section>
</section>
<section>
<section id="slide-org279bc3e">
<h3 id="org279bc3e"><span class="section-number-3">4.19</span> Raw HTML in Slides</h3>
<p>
Besides the Org contents, you can embed raw HTML contents
into slides by placing a <code>#+REVEAL_HTML</code> keyword.
</p>

<p>
The famous cat jump fail:
</p>
<iframe width="420" height="315" src="https://www.youtube.com/embed/Awf45u6zrP0" frameborder="0" allowfullscreen></iframe>
</section>
</section>
<section>
<section id="slide-orgfd8f579">
<h3 id="orgfd8f579"><span class="section-number-3">4.20</span> Speaker Notes</h3>
<p>
Reveal.js supports speaker notes, which are displayed in a separate
browser window. Pressing 's' on slide's windows will pop up a window
displaying the current slide, the next slide and the speaker notes on the current
slide.
</p>

<p>
Org-reveal recognize texts between <code>#+BEGIN_NOTES</code> and <code>#+END_NOTES</code>
as speaker notes. See the example below.
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #e4e4e4; font-size: 110%; font-weight: bold;">* Heading 1</span>
   Some contents.
<span style="color: #383838;">#+BEGIN_NOTES</span>
  Enter speaker notes here.
<span style="color: #383838;">#+END_NOTES</span>
</code></pre>
</div>

<p>
To skip exporting speaker notes, please set variable
`org-reveal-ignore-speaker-notes` to `t`.
</p>

</section>
<section id="slide-orgfd8f579-split">
<p>
Speaker notes requires the <code>notes</code> plug-in. If you changed default
plug-in setting by specifying <code>#+REVEAL_PLUGINS</code> or by setting
variable <code>org-reveal-plugins</code>, please make sure <code>notes</code> is in the
plug-in list to enable speaker notes.
</p>

</section>
<section id="slide-orgfd8f579-split">

<p>
Due to a bug in Reveal.js, sometimes the speaker notes window
shows only blank screens. A workaround to this issue is to put
the presentation HTML file into the Reveal.js root directory and
reopen it in the browser.
</p>

</section>
<section id="slide-org186777c">
<h4 id="org186777c"><span class="section-number-4">4.20.1</span> Easy-Template for Speaker Notes</h4>
<p>
Org-reveal registers 'n' as the key for speaker notes easy-template.
So you can press '&lt;' followed by 'n' and then press TAB, the <code>#+BEGIN_NOTES</code>
and <code>#+END_NOTES</code> pair is inserted automatically.
</p>

<p>
Customize <code>org-reveal-note-key-char</code> to change the default key
'n'. set it to nil will forbid the auto-completion for speaker notes.
</p>

</section>
</section>
<section>
<section id="slide-org7f2f93f">
<h3 id="org7f2f93f"><span class="section-number-3">4.21</span> Multiplexing</h3>
<p>
Reveal.js supports multiplexing, which allows your audience to view
the slides of the presentation you are controlling on their own phone, tablet
or laptop. As the master presentation navigates the slides, all client
presentations will update in real time. See a demo at
<a href="http://revealjs.jit.su/">http://revealjs.jit.su/</a>.
</p>

<p>
You can enable multiplexing for your slide generation by including the
following options:
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_MULTIPLEX_ID: [Obtained from the socket.io server. ]</span>
<span style="color: #383838;">#+REVEAL_MULTIPLEX_SECRET: [Obtained from socket.io server. Gives the master control of the presentation.]</span>
<span style="color: #383838;">#+REVEAL_MULTIPLEX_URL: <a href="http://revealjs.jit.su:80">http://revealjs.jit.su:80</a> [Location of socket.io server]</span>
<span style="color: #383838;">#+REVEAL_MULTIPLEX_SOCKETIO_URL: <a href="http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js">http://cdnjs.cloudflare.com/ajax/libs/socket.io/0.9.10/socket.io.min.js</a></span>
<span style="color: #383838;">#+REVEAL_PLUGINS: ([any other plugins you are using] multiplex)</span>
</code></pre>
</div>

<p>
You must generate unique values for the <code>REVEAL_MULTIPLEX_ID</code> and
<code>REVEAL_MULTIPLEX_SECRET</code> options, obtaining these from the socket.io server
you are using.
</p>

<p>
If you include these options in your .org file, reveal-org will enable your
.html file as the master file for multiplexing and will generate a file named
in the form <code>[filename]_client.html</code> in the same directory as the client
.html file. Provide your audience with a link to the client file to allow
them to track your presentation on their own device.
</p>

</section>
</section>
<section>
<section id="slide-org2e3d84d">
<h3 id="org2e3d84d"><span class="section-number-3">4.22</span> Extra Stylesheets</h3>
<p>
Set <code>REVEAL_EXTRA_CSS</code> to a stylesheet file path in order to load extra custom
styles after loading a theme.
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_EXTRA_CSS: url-to-custom-stylesheet.css</span>
</code></pre>
</div>

</section>
</section>
<section>
<section id="slide-org9d26d67">
<h3 id="org9d26d67"><span class="section-number-3">4.23</span> Select Built-In Scripts</h3>
<p>
Set option <code>REVEAL_PLUGINS</code> or variable <code>org-reveal-plugins</code> to a
lisp list to select built-in scripts.
</p>

<p>
Available built-in scripts are:
classList/markdown/highlight/zoom/notes/search/remotes.
</p>

<p>
Default built-ins are: classList/markdown/highlight/zoom/notes/multiplex.
</p>

<p>
The following examples select <i>markdown</i> and <i>highlight</i> only.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_PLUGINS: (markdown highlight)</span>
</code></pre>
</div>

</section>
</section>
<section>
<section id="slide-org2f3c7d4">
<h3 id="org2f3c7d4"><span class="section-number-3">4.24</span> Extra Dependent Script</h3>
<p>
Set <code>REVEAL_EXTRA_JS</code> to the url of extra reveal.js dependent
script if necessary.
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_EXTRA_JS: url-to-custom-script.js</span>
</code></pre>
</div>

</section>
</section>
<section>
<section id="slide-org709638e">
<h3 id="org709638e"><span class="section-number-3">4.25</span> Extra Slide Attribute</h3>
<p>
Set property <code>reveal_extra_attr</code> to headings to add any necessary attributes
to slides.
</p>

</section>
</section>
<section>
<section id="slide-org7e91c29">
<h3 id="org7e91c29"><span class="section-number-3">4.26</span> Export into Single File</h3>
<p>
By setting option <code>reveal_single_file</code> to <code>t</code>, images and necessary
Reveal.js scripts will be embedded into the exported HTML file, to make
a portable HTML. Please note that remote images will <i>not</i> be included in the
single file, so presentations with remote images will still require an Internet
connection.
</p>

<p>
Attention: This needs locally available reveal.js files!
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+OPTIONS: reveal_single_file:t</span>
</code></pre>
</div>

<p>
When exporting into single file, functions provided by Reveal.js
libraries will be disabled due to limitation, including PDF export,
Markdown support, zooming, speaker notes and remote control.
</p>

<p>
Code highlight by highlight.js is also disabled. But <b>code
highlight by Emacs is not effected.</b>
</p>

</section>
</section>
<section>
<section id="slide-org88967a0">
<h3 id="org88967a0"><span class="section-number-3">4.27</span> Export Current Subtree</h3>
<p>
Use menu entry " C-c C-e R S" to export only current subtree,
without the title slide and the table of content, for a quick preview
of your current edition.
</p>

</section>
</section>
<section>
<section id="slide-orgea52323">
<h2 id="orgea52323"><span class="section-number-2">5</span> Tips</h2>
<div class="outline-text-2" id="text-5">
</div>
</section>
</section>
<section>
<section id="slide-orgfbb1a52">
<h3 id="orgfbb1a52"><span class="section-number-3">5.1</span> Managing Table of Contents</h3>
<p>
It is well often the automatic "Table of Contents" is too large to fit
into one slide. One workaround is to disable the automatic TOC and
generate one manually, which can be split into multiple
slides. Org-reveal provides a helper function to insert a TOC to the
current org buffer. Type <code>M-x org-reveal-manual-toc</code> to invoke it.
</p>

<p>
To disable the automatic TOC, add <code>toc:nil</code> to <code>#+OPTIONS</code>
</p>
<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+OPTIONS: toc:nil</span>
</code></pre>
</div>



</section>
</section>
<section>
<section id="slide-orgee49b10">
<h3 id="orgee49b10"><span class="section-number-3">5.2</span> Internal Links</h3>
<p>
Reveal.js supports only jump between slides, but not between
elements on slides. Thus, we can only link to headlines in an Org
document.
</p>

<p>
You can create links pointing to a headline's text, or its
custom-id, as the examples below:
</p>

<ul>
<li><a href="#/slide-orgea52323">5</a>.</li>
<li><a href="#/slide-my-heading">Heading</a> with a <code>CUSTOM_ID</code> property.</li>

</ul>

</section>
</section>
<section>
<section id="slide-org8906e20">
<h3 id="org8906e20"><span class="section-number-3">5.3</span> Custom JS</h3>
<p>
To pass custom JS code to <code>Reveal.initialize</code>, state the code by
<code>#+REVEAL_INIT_SCRIPT</code> (multiple statements are concatenated) or by
custom variable <code>org-reveal-init-script</code>.
</p>

</section>
</section>
<section>
<section id="slide-orgdbd1e41">
<h3 id="orgdbd1e41"><span class="section-number-3">5.4</span> Executable Source Blocks</h3>
<p>
To allow live execution of code in some languages, enable the klipse plugin by setting <code>org-reveal-klipsify-src</code> to non-nil.  Src blocks with the languages <code>js</code>, <code>clojure</code>, <code>html</code>, <code>python</code>, <code>ruby</code>, <code>scheme</code>, <code>php</code> will be executed with output shown in a console-like environment.  See the source code of <code>org-reveal-src-block</code> for more details.  
</p>

</section>
<section id="slide-orgb2aef8f">
<h4 id="orgb2aef8f"><span class="section-number-4">5.4.1</span> HTML Src Block</h4>
<div class="org-src-container">

<pre  class="src src-html"><code trim>&lt;<span style="color: #00ffc2;">h1</span> <span style="color: #00e9ff;">class</span>=<span style="color: #ffa900;">"whatever"</span>&gt;<span style="font-weight: bold; text-decoration: underline;">hello, what's your name</span>&lt;/<span style="color: #00ffc2;">h1</span>&gt;
</code></pre>
</div>

</section>
<section id="slide-org1a8124d">
<h4 id="org1a8124d"><span class="section-number-4">5.4.2</span> Javascript Src Block</h4>
<div class="org-src-container">

<pre  class="src src-js"><code trim>console.log(<span style="color: #ffa900;">"success"</span>);
<span style="color: #ff3300; font-weight: bold;">var</span> <span style="color: #00e9ff;">x</span>=<span style="color: #ffa900;">'string using single quote'</span>;
x
</code></pre>
</div>

</section>
<section id="slide-org3d1a52e">
<h4 id="org3d1a52e"><span class="section-number-4">5.4.3</span> Perl Src Block (not klipsified)</h4>
<div class="org-src-container">

<pre  class="src src-perl"><code trim>I don<span style="color: #ffa900;">'t know perl!</span>
</code></pre>
</div>

</section>
</section>
<section>
<section id="slide-org0a5ea31">
<h3 id="org0a5ea31"><span class="section-number-3">5.5</span> Properties for Sub-headings</h3>
<p>
If you want to have multiple reveal presentations in a single Org-mode
file, you might want to switch from file-based properties like:
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #383838;">#+REVEAL_HLEVEL: 2</span>
<span style="color: #383838;">#+OPTIONS: transition: 'cube'</span>
<span style="color: #383838;">#+REVEAL_THEME: moon</span>
</code></pre>
</div>

<p>
to properties of sub-headings like:
</p>

<div class="org-src-container">

<pre  class="src src-org"><code trim><span style="color: #00ffc2;">:PROPERTIES:</span>
<span style="color: #00ffc2;">:EXPORT_REVEAL_HLEVEL:</span> 2
<span style="color: #00ffc2;">:EXPORT_REVEAL_TRANS:</span> cube
<span style="color: #00ffc2;">:EXPORT_REVEAL_THEME:</span> moon
<span style="color: #00ffc2;">:END:</span>
</code></pre>
</div>

<p>
This way, each org-reveal presentation can have its own settings. An example heading with corresponding settings would look like:
</p>

<p>
#+BEGIN<sub>SRC</sub> org
</p>
</section>
</section>
<section>
<section id="slide-org27dfbc7">
<h2 id="org27dfbc7"><span class="section-number-2">6</span> My org-reveal presentation among many within the same Org-mode file</h2>
<p>
#+END<sub>SRC</sub>
</p>

</section>
</section>
<section>
<section id="slide-orgdf83f44">
<h2 id="orgdf83f44"><span class="section-number-2">7</span> Thanks</h2>
<p>
Courtesy to:
</p>

<p class="fragment roll-in">
The powerful Org-mode,
</p>
<p class="fragment roll-in">
the impressive Reveal.js
</p>
<p class="fragment roll-in">
and the precise MathJax
</p>
</section>
</section>
</div>
</div>
<p> Created by yjwen. </p>
<script src="file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/js/reveal.js"></script>

<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
width:1200, height:800, margin: 0.1, minScale:0.2, maxScale:2.5, transition:'cube',
multiplex: {
    secret: '', // null if client
    id: '', // id, obtained from socket.io server
    url: '' // Location of socket.io server
},

// Optional libraries used to extend on reveal.js
dependencies: [
 { src: 'file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
 { src: 'file:///home/leo/local/opt/reveal.js-3.8.0/js/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }]
});
</script>
</body>
</html>
